<template>
    <div class="user">
        <el-row type="flex" justify="start">
            <el-col :span="24" style="text-align:left">
                <el-form :inline="true" :model="searchParam" class="demo-form-inline">
                    <el-form-item label="用户名">
                        <el-input v-model="searchParam.userName" placeholder="用户名" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchUserList()">查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column
                            prop="username"
                            label="用户名"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="logincode"
                            label="账号"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="性别"
                            align="center"
                            show-overflow-tooltip>
                        <template slot-scope="scope">{{scope.row.sex==0?'女':(scope.row.sex==1?'男':'')}}</template>
                    </el-table-column>
                    <el-table-column
                            prop="iphone"
                            label="电话"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            align="center"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span :class="scope.row.status==0?'c-0f65fa':'c-e09017'">{{scope.row.status==0?'正常':'已冻结'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="registerTime"
                            label="注册时间"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作" min-width="150" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" :type="scope.row.status==0?'warning':'info'"
                                       @click="freeze(scope.row)">
                                {{scope.row.status==0?'冻结':'解冻'}}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="t-a-c m-t-5">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchParam.page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="searchParam.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="searchParam.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    import {searchUserList, updateuserStatus} from "@/api/userApi";

    export default {
        name: "user",
        data() {
            return {
                searchParam: {
                    userName: null,
                    size: 10,
                    page: 1,
                    total: 0
                },
                tableData: []
            }
        },
        created() {
            this.searchUserList();
        },
        methods: {
            //查询用户列表
            searchUserList() {
                searchUserList(this.searchParam).then(res => {
                    this.tableData = res.list;
                    this.searchParam.total = res.total;
                })
            },
            //冻结/解冻
            freeze(row) {
                this.$confirm(`是否确定${row.status == 0 ? '冻结' : '解除冻结'}用户？`, '重要提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let param = {
                        id: row.id,
                        status: row.status == 0 ? 1 : 0
                    }
                    updateuserStatus(param).then(res => {
                        this.$message.success('操作成功');
                        this.searchUserList();
                    })
                }).catch(() => {
                })
            },
            //分页
            handleSizeChange(val) {
                this.searchParam.size = val;
                this.searchUserList();
            },
            handleCurrentChange(val) {
                this.searchParam.page = val;
                this.searchUserList();
            },
        }
    }
</script>

<style scoped>
    .user {

    }

</style>